<template>
  <div :class="classes">
    <div>
      <span class="icon-pointer" v-if="showIcon"></span>
      <slot>{{name}}</slot>
    </div>
    <div>
      <slot name="right"></slot>
    </div>
    <div v-if="line" :class="`${prefixCls}-division`"></div>
  </div>
</template>
<script>
const prefixCls = 'zz-title';

export default {
    name: 'Title',
    components:{},
    props:{
        name:{
            type: String,
        }, 
        line: {
            type: Boolean,
            default: false
        },
        showIcon: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
          prefixCls: prefixCls
        }
    },
    computed:{
        classes(){
            return [
                `${prefixCls}`,
                {
                    [`${prefixCls}-show`]: this.title,
                }
            ];
        },
        title(){
            const def = this.$slots.default;
            return (def && def.length) || this.name;
        }
    },
};
</script>
<style lang="scss" scoped>
@import './title.scss';
</style>